<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_猜数字练习</title>
</head>
<body>
<h3>已生成一个1-100之间的随机数</h3>
<input type="text" placeholder="请输入一个0-100的整数">
<button onclick="guess()">点我验证</button>
<h4>结果:<span></span></h4>
<script>
    //生成一个用来猜的随机数
    let x=parseInt(Math.random()*100+1);
    var count=0;
    //定义猜数字的方法
    function guess(){
        //获取用户输入的数字
        let num=document.querySelector("input").value;
        /*优化：要对拿到的数据做校验，确保输入的是数字
        * / /一堆斜杠里面的是正则表达式
        * ^表示开头 $表示结尾 +表示至少出现一次 \d表示数字*/
        if(!/^\d+$/.test(num)){
            alert("请输入数字!");
            return;
        }
        //获取用来显示结果的span元素
        let spanE=document.querySelector("span");
        /*每猜一次，猜的次数+1*/
        count++;
        if(num>x) {
            spanE.innerHTML="猜大了!";
        }else if(num<x){
            spanE.innerHTML="猜小了!";
        }else{
            spanE.innerHTML="恭喜你用了"+count+"次就猜对了!";
        }
    }
</script>
</body>
</html>